<template>
  <ul>
    <li
      class="cin_list"
      v-for="item in tCinema"
      @click="getDetailCinema(item.cinemaId)"
    >
      <div class="cinema-info">
        <h3>{{ item.name }}</h3>
        <span v-if="ticketFlag == 2"> 2D通兑票 | 3D通兑票 </span>
        <span>{{ item.address }}</span>
      </div>

      <div class="cinema-info-rt">
        <span v-if="ticketFlag == 1">￥{{ item.lowPrice / 100 }} 起</span>
        <img v-if="ticketFlag == 2" src="@/assets/gpsAddress.png" alt="" />
        <span v-if="ticketFlag == 2" class="specite">距离未知</span>
        <span v-if="ticketFlag == 1" class="specite">{{
          item.districtName
        }}</span>
      </div>
    </li>
  </ul>
</template>

<style scoped>
ul {
  /* height: 525px;
    max-width: 525px; */
  overflow: auto;
}

li {
  background-color: #fff;
  padding: 15px;
  font-size: 12px;
}

h3 {
  color: #191a1b;
  font-size: 15px;
  display: block;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  width: 200px;
}

span {
  max-width: 260px;
  color: #797d82;
  font-size: 12px;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  float: left;
}

.specite {
  color: #797d82 !important;
}

.cin_list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ededed;
  overflow-x: hidden;
}

.cinema-info-rt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.cinema-info-rt span {
  color: #ff5f16;
  font-size: 10px;
}

img {
  width: 13px;
  height: 17px;
}
</style>

<script setup>
import { defineProps } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const getDetailCinema = (id) => {
  router.push(`/cinema/${id}/film`);
};

defineProps(["tCinema", "ticketFlag"]);
</script>
